<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/layui/css/layui.css"  media="all">

</head>

<style>
    .searchdiv{
        background: #fff;
        border-radius: 6px;margin-top: 10px;
        box-shadow: 1px 1px 3px rgba(0,0,0,.2);
        padding: 10px;
    }
</style>

<body style="background-color: #f3f3f4;">

    <div class="searchdiv">
        <form class="layui-form" id="searhFrom">
            <div class="layui-row layui-form-item">
                <div class="layui-col-xs3">
                    <label class="layui-form-label">用户名：</label>
                    <div class="layui-input-block">
                        <input type="text" name="username" lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-col-xs3">
                    <label class="layui-form-label">电子邮箱：</label>
                    <div class="layui-input-block">
                        <input type="text" name="email" lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-col-xs3">
                    <label class="layui-form-label">电话：</label>
                    <div class="layui-input-block">
                        <input type="text" name="phone" lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-col-xs3" style="padding-left:20px; ">
                    <button type="button" class="layui-btn" id="btn_query">查询</button>
                </div>
                </div>
            </div>
        </form>
    </div>

    <div class="searchdiv">
        <button class="layui-btn layui-btn-normal" id="addUser">新增</button>
        <table class="layui-hide" id="test" lay-filter="test"></table>
    </div>


    <div id="tyes" style="display: none">

    </div>

    <div id="addUserModel" style="display: none">
        <form class="layui-form" id="addform" style="padding: 20px;" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">用户名 :</label>
                <div class="layui-input-block">
                    <input type="text" name="username"    lay-verify="required" placeholder="请输入"  class="layui-input" >
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">密码 :</label>
                <div class="layui-input-block">
                    <input type="password" name="password" lay-verify="required"  class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">确认密码:</label>
                <div class="layui-input-block">
                    <input type="password" name="confirmPassword"  lay-verify="required" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">邮箱 :</label>
                <div class="layui-input-block">
                    <input type="text" name="email" lay-verify="email" placeholder="请输入"  class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">电话 :</label>
                <div class="layui-input-block">
                    <input type="text" name="phone"  lay-verify="required|phone" placeholder="请输入"  class="layui-input">
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label">性别</label>
                <div class="layui-input-block">
                    <input type="radio" name="sex"  value="1"  title="男">
                    <input type="radio" name="sex"  value="2"  title="女">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">年龄 :</label>
                <div class="layui-input-block">
                    <input type="text" name="age"  placeholder="请输入"  class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="button" class="layui-btn" lay-submit="" lay-filter="addSubmit">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>



    <script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-xs" lay-event="roleList">编辑角色</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script src="/layui/layui.all.js" charset="utf-8"></script>

<script>

    ;!function(){
        var table = layui.table;
        var $ = layui.jquery,layer = layui.layer;
        var form = layui.form;


        //第一个实例
        var tableIns = table.render({
            elem: '#test'
            ,height: 312
            ,where: {}
            ,url: '/user/list' //数据接口
            ,page: true //开启分页
            ,cols: [
                [ //表头
                {field: 'id', title: 'ID', sort: true, fixed: 'left'}
                ,{field: 'username', title: '用户名',align:'center'}
                ,{field: 'sex', title: '性别', sort: true}
                ,{field: 'email', title: '邮箱'}
                ,{field: 'age', title: '年龄'}
                ,{field: 'status', title: '用户状态',templet: function(d){
                    if(d.status ==1){
                        return "有效";
                    }else{
                        return "无效";
                    }
                    }}
                ,{fixed: 'right', title:'操作', width:230, toolbar: '#barDemo'}
                ]
            ]
        });

        /**
         * 查询按钮事件
         * **/
        $("#btn_query").click(function(){
            tableIns.reload({
                where:{
                    username:$("input[name=username]").val(),
                    email:$("input[name=email]").val(),
                    phone:$("input[name=phone]").val()

                },page: {
                    curr: 1 //重新从第 1 页开始
                }
            })
        });

        /**
         * 监听表格对用户操作
         *
         * **/
        var editwindow ;
        table.on('tool(test)', function(obj){
            var data = obj.data;
            if(obj.event === 'del'){
                top.layer.confirm('真的删除行么', function(index){
                    $.ajax({
                        url:"/user/del",
                        type:"post",
                        data:{userId:data.userId},
                        success:function(data){
                            if(data.ret){
                                obj.del();
                                parent.layer.close(index);
                                parent.layer.msg("删除成功!")
                            }
                        }
                    })

                });
            }
            else if(obj.event === 'edit'){

                $("#tyes").load("/user/edit?userId=" + data.userId,function() {
                    editwindow = top.layer.open({
                        type: 1,
                        area: ['500px', '450px'],
                        content: $('#tyes').html(),
                        success:function(){
                            parent.layui.form.render();
                        }
                    });
                });


            }
            else if(obj.event === 'roleList'){
                var index ;
                parent.layui.table.render({
                    elem: '#RoleList'
                    ,url:'/user/roleList?id='+data.id
                    ,cols: [
                        [
                        {type:'checkbox'}
                        ,{field:'role', width:80,title: 'ID',templet: function(d){return d.role.id}, sort: true}
                        ,{field:'role', width:280,title: '角色名称',templet: function(d){return d.role.name}}
                        ,{field:'role', width:280,title: '角色描述',templet: function(d){return d.role.description}, sort: true}
                        ,{field:'role',title: '状态',templet: function(d){
                                if(d.role.status == 1){
                                    return "有效";
                                }else{
                                    return "删除";
                                }
                            }}
                    ]
                    ]
                    ,page: false
                    , done: function(res, curr, count){
                        index = parent.layer.open({
                            type: 1,
                            area: ['800px', '500px'],
                            content: parent.$('#UserRole')
                        });
                    }
                });

                var active = {
                    getCheckData: function(){ //获取选中数据
                        var checkStatus = parent.layui.table.checkStatus('RoleList')
                            ,checkList = checkStatus.data; // 获取选中的数据
                        if(checkList.length == 0){
                            parent.layer.msg("你必须选中过一个！")
                        }else{
                            var roleId = new Array();
                            for(var i = 0 ; i<checkList.length;i++){
                                roleId.push(checkList[i].role.id);
                            }

                            $.ajax({
                                type:"post",
                                url:"/user/updateRoleIdbyUserId",
                                dataType:"json",
                                traditional: true,//这里设置为true
                                data:{
                                    "userid":data.id // userid
                                    ,"roleid":roleId //roleId []...
                                },success:function (data) {
                                    if(data.ret){
                                       parent.layer.msg("修改成功!");
                                       parent.layer.close(index);
                                    }
                                }
                            })
                        }
                    }
                };


                parent.$('body').on('click',".demoTable .layui-btn", function(){
                    var type = parent.$(this).data('type');
                    active[type] ? active[type].call(this) : '';
                });

            }
        });


        /***
         *  监听编辑用户提交表单
         * */
        parent.layui.form.on('submit(editSubmit)', function(data){

            $.ajax({
                url:"/user/edit",
                type:"post",
                dataType:"json",
                data: parent.$("#editform").serialize(),
                success:function(data){
                    if(data.ret){
                        parent.layer.close(editwindow);
                        parent.layer.msg("修改成功!");
                        tableIns.reload({
                            where: {}
                            ,page: {
                                curr: 1 //重新从第 1 页开始
                            }
                        });
                    }
                }

            })
            return false;
        });

        /**
        *  新增用户单击事件  addModel 模态框的局部变量 方便下面引用
        * */
        var addModel;
        $("#addUser").click(function(){
            addModel = parent.layer.open({
                type: 1,
                area: ['500px', '550px'],
                content: $('#addUserModel').html(),
                success:function(){
                    parent.layui.form.render();
                }
            });
        });

        /**
         *  监听 添加用户提交按钮
         */
        parent.layui.form.on('submit(addSubmit)', function(data){
            // 判断两次输入密码是否一致
            if(data.field.confirmPassword != data.field.password){
                parent.layer.msg("请检查密码一致性！");
                return false;
            }

            $.ajax({
                url:"/user/add",
                type:"post",
                dataType:"json",
                data: parent.$("#addform").serialize(),
                success:function (data) {
                    if(data.ret){
                        parent.layer.msg("添加成功！")
                        parent.layer.close(addModel);
                    }else{
                        parent.layer.msg(data.msg)
                    }
                },error:function(data){
                    parent.layer.msg("出现错误");
                }
            })
            return false;
        });


    }();
</script>
</body>

</html>
